<template>
  <el-dialog title="考试结果" :visible.sync="dialogVisible" width="80%" :append-to-body="true">
    <div slot="title">
      <span class="el-dialog__title">考试结果</span>
      <el-button type="primary" @click="exportTrain"
        style="float: right; position: absolute; right: 90px">导出试卷</el-button>
      <el-button type="info" @click="handleClose" style="float: right; position: absolute; right: 10px">关闭</el-button>
    </div>
    <div class="el-dialog__body">
      <el-row>
        <el-col>
          <div class="exam-title">
            <h1>{{ examinationPlanName }}</h1>
            <div style="display: flex; align-items: center;">
              <h2>得分：{{ totalScore }}</h2>
              <img src="@/assets/icons/未合格.png" alt="未合格" style="width: 80px; height: 80px;margin-left:100px;" />
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col v-if="radioList && radioList.length > 0">
          <el-divider content-position="left"><el-tag>单选题</el-tag></el-divider>
          <div v-for="(item, index) in radioList" :key="index">
            <p class="question-name">{{ index + 1 }}. {{ item.questionName }}</p>
            <div v-for="(item2, index2) in item.questionAnswerList" :key="index2">
              <div style="margin-top: 10px">
                <span :class="{ 'correct-answer': item2.questionAnswerOption === item.rightAnswer }">
                  {{ item2.questionAnswerOption }}.{{ item2.questionAnswerName }}
                </span>
              </div>
            </div>
            <div style="display: flex;  margin-top: 30px;">
              <div style="color: #d43030">你的选择： {{ item.chooseAnswer }}</div>
              <div style="color: #43cf7c ; margin-left: 50px;">正确答案： {{ item.rightAnswer }}</div>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row v-if="judgmentList && judgmentList.length > 0">
        <el-col>
          <el-divider content-position="left"><el-tag>判断题</el-tag></el-divider>
          <div v-for="(item, index) in judgmentList" :key="index">
            <p class="question-name">{{ index + 1 }}. {{ item.questionName }}</p>
            <div v-for="(item2, index2) in item.questionAnswerList" :key="index2">
              <div style="margin-top: 10px">
                <span :class="{ 'correct-answer': item2.questionAnswerOption === item.rightAnswer }">
                  {{ item2.questionAnswerOption }}.{{ item2.questionAnswerName }}
                </span>
              </div>
            </div>
            <div style="display: flex; justify-content: space-between; margin-top: 30px;">
              <div style="color: #d43030">你的选择： {{ item.chooseAnswer }}</div>
              <div style="color: #43cf7c ; margin-left: 50px;">正确答案： {{ item.rightAnswer }}</div>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row v-if="multipleList && multipleList.length > 0">
        <el-col>
          <el-divider content-position="left"><el-tag>多选题</el-tag></el-divider>
          <div v-for="item in multipleList" :key="item.questionId">
            <p>{{ item.questionName }}</p>
            <div v-for="(item2, index2) in item.questionAnswerList" :key="index2">
              <div style="margin-top: 10px">
                <span :class="{ 'correct-answer': item2.questionAnswerOption === item.rightAnswer }">
                  {{ item2.questionAnswerOption }}.{{ item2.questionAnswerName }}
                </span>
              </div>
            </div>
            <div style="display: flex; justify-content: space-between; margin-top: 30px;">
              <div style="color: #d43030">你的选择： {{ item.chooseAnswer }}</div>
              <div style="color: #43cf7c ; margin-left: 50px;">正确答案： {{ item.rightAnswer }}</div>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row v-if="fillList && fillList.length > 0">
        <el-col>
          <el-divider content-position="left"><el-tag>填空题</el-tag></el-divider>
          <div v-for="item in fillList" :key="item.questionId">
            <p>{{ item.questionName }}</p>
            <div v-for="item2 in item.questionAnswerList" :key="item2.questionAnswerId">
              <div style="margin-top: 10px">
                <span>{{ item2.questionAnswerOption }}</span>
                <span style="margin-left: 10px">{{ item2.questionAnswerName }}</span>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row v-if="shortList && shortList.length > 0">
        <el-col>
          <el-divider content-position="left"><el-tag>简答题</el-tag></el-divider>
          <div v-for="item in shortList" :key="item.questionId">
            <p>{{ item.questionName }}</p>
            <div v-for="item2 in item.questionAnswerList" :key="item2.questionAnswerId">
              <div style="margin-top: 10px">
                <span>{{ item2.questionAnswerOption }}</span>
                <span style="margin-left: 10px">{{ item2.questionAnswerName }}</span>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </el-dialog>
</template>

<script>
import { getTrainRecordInfo, getSimulateRecord } from "@/api/train/index.js";

export default {
  data() {
    return {
      dialogVisible: false,
      radioList: [],
      multipleList: [],
      judgmentList: [],
      fillList: [],
      shortList: [],
      examinationPlanName: "",
      totalScore: 0,
      trainRecordId: null
    };
  },
  methods: {
    exportTrain() {
      this.download('/student/exportStudentTrainRecordByTrainId', {
        trainRecordId: this.trainRecordId
      }, `train_${new Date().getTime()}.docx`);
    },
    show(id, type) {
      this.trainRecordId = id;
      this.dialogVisible = true;
      if (type == 2) {
        getTrainRecordInfo({ trainRecordId: id }).then((res) => {
          this.radioList = res.data.radioList;
          this.multipleList = res.data.multipleList;
          this.judgmentList = res.data.judgmentList;
          this.fillList = res.data.fillList;
          this.shortList = res.data.shortList;
          this.examinationPlanName = res.data.examinationPlanName;
          this.totalScore = res.data.totalScore;
        });
      } else {
        getSimulateRecord({ trainSimulateRecordId: id }).then((res) => {
          this.radioList = res.data.radioList;
          this.multipleList = res.data.multipleList;
          this.judgmentList = res.data.judgmentList;
          this.fillList = res.data.fillList;
          this.shortList = res.data.shortList;
          this.examinationPlanName = res.data.examinationPlanName;
          this.totalScore = res.data.totalScore;
        });
      }
    },
    handleClose() {
      this.dialogVisible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../css/record-info.scss";
</style>